<template>
    <div id="Navbar">
        <div class="logo">
            <span class="logo-text">axlab</span>
        </div>
        <div class="search" @click="router.push('/sear')" style="position: relative;">
            <div><van-icon color="#cccccc" size="1.5rem" name="search" /></div>
            <div style="margin-left: .5669rem; color: #ccc;">搜索</div>
            <div style="position: absolute; right: .5rem; z-index: 999;" @click.stop="router.push('/ai_chat')"><van-icon name="service" /> </div>
        </div>
        <div class="nav-address">
            <div class="address">
                <van-icon name="shop-o" color="#666666" size="1.2rem" />万达广场店<van-icon name="arrow" />
            </div>
            <div class="share">
                <van-icon name="share-o" color="#666666" size="1.2rem" />分享
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router'
const router = useRouter()

const search = ref('');


</script>

<style scoped>
#Navbar {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-direction: column;
    padding-top: 20px;
    justify-content: center;
}

.logo {
    display: flex;
    align-content: center;
    justify-content: center;

    .logo-text {
        font-size: 1.7006rem;
        color: #ff0300;
    }
}

.search {
    display: flex;
    align-items: center;
    padding: .2834rem 1.1337rem;
    border: 1px solid #a52020;
    border-radius: 1.1337rem;
    margin: .907rem 1.1337rem;
}

.nav-address {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 .5669rem.3rem;
    color: #757575;
}
</style>